<template>
  <div class="intro-container">

    <!-- 英雄区域 -->
    <div class="hero-section" id="overview">
      <div class="hero-content">
        <h1>智能仓库管理系统</h1>
        <p class="hero-subtitle">让仓库管理更高效、更智能、更轻松</p>
        <div class="hero-buttons">
          <el-button type="primary" size="large" @click="showDemo">立即体验</el-button>
          <el-button type="success" size="large" @click="showContact">联系我们</el-button>
        </div>
      </div>
      <div class="hero-image">
        <img src="https://picsum.photos/seed/warehouse-system/800/500.jpg" alt="仓库管理系统示意图" />
      </div>
    </div>

    <!-- 核心功能 -->
    <div class="section" id="features">
      <h2>核心功能</h2>
      <div class="features-grid">
        <div class="feature-card" v-for="(feature, index) in features" :key="index">
          <div class="feature-icon">
            <i :class="feature.icon" style="font-size: 2.5rem; color: #409EFF;"></i>
          </div>
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
          <el-button type="text" @click="showFeatureDetail(feature)">了解更多</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { ElMessage } from 'element-ui';

export default {
  name: 'SystemIntro',
  data() {
    return {
      activeIndex: '1',
      demoVisible: false,
      contactVisible: false,
      isSubmitting: false,
      contactForm: {
        name: '',
        company: '',
        phone: '',
        email: '',
        message: ''
      },
      features: [
        {
          icon: 'el-icon-s-tools',
          title: '入库管理',
          description: '支持条码/二维码扫描入库，自动生成入库单，支持批量导入和导出功能。'
        },
        {
          icon: 'el-icon-s-marketing',
          title: '出库管理',
          description: '智能出库路径规划，支持多种出库方式，提高出库效率，减少等待时间。'
        },
        {
          icon: 'el-icon-data-line',
          title: '库存查询',
          description: '实时库存数据可视化，支持多维度查询和筛选，提供库存预警功能。'
        },
        {
          icon: 'el-icon-s-data',
          title: '数据分析',
          description: '提供库存周转率、出入库频率等数据分析，帮助优化仓库布局和库存策略。'
        },
        {
          icon: 'el-icon-s-operation',
          title: '盘点管理',
          description: '支持定期盘点和循环盘点，自动生成盘点报告，减少盘点工作量。'
        },
        {
          icon: 'el-icon-s-promotion',
          title: '报表中心',
          description: '提供多种报表模板，支持自定义报表，满足不同管理层级的报表需求。'
        }
      ],
      stats: [
        {
          title: '平均提效',
          value: '35%',
          suffixIcon: 'el-icon-percent'
        },
        {
          title: '错误率降低',
          value: '78%',
          suffixIcon: 'el-icon-percent'
        },
        {
          title: '人力成本节省',
          value: '25%',
          suffixIcon: 'el-icon-percent'
        },
        {
          title: '客户满意度',
          value: '96',
          suffixIcon: 'el-icon-star-on',
          precision: 1
        }
      ],
      reviews: [
        {
          content: '使用这个仓库管理系统后，我们的出入库效率提高了30%，错误率降低了70%。系统界面友好，操作简单，员工上手很快。',
          name: '张经理',
          company: '北京优品供应链有限公司',
          avatar: 'https://picsum.photos/seed/review1/100/100.jpg'
        },
        {
          content: '系统的数据分析功能非常强大，帮助我们优化了仓库布局，减少了库存积压。客户评价也明显提升，非常满意！',
          name: '李总监',
          company: '上海快运物流有限公司',
          avatar: 'https://picsum.photos/seed/review2/100/100.jpg'
        },
        {
          content: '系统支持条码扫描，大大减少了人工录入的工作量。报表功能也很实用，管理层可以随时了解仓库情况。',
          name: '王主管',
          company: '广州电商仓储中心',
          avatar: 'https://picsum.photos/seed/review3/100/100.jpg'
        }
      ]
    };
  },
  methods: {
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    showDemo() {
      this.demoVisible = true;
    },
    handleDemoClose() {
      this.demoVisible = false;
    },
    showFeatureDetail(feature) {
      ElMessage.success(`您点击了"${feature.title}"功能，这里将展示更详细的信息。`);
    },
    showContact() {
      this.scrollToSection('contact');
    },
    submitContactForm() {
      this.isSubmitting = true;
      // 模拟提交
      setTimeout(() => {
        this.isSubmitting = false;
        this.contactVisible = true;
        this.resetForm();
      }, 1000);
    },
    resetForm() {
      this.$refs.contactForm.resetFields();
    },
    startChat() {
      ElMessage.success('在线客服功能即将上线，敬请期待！');
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
.intro-container {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

/* 顶部导航 */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.system-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #409EFF;
}

.nav-links {
  display: flex;
  gap: 20px;
}

/* 英雄区域 */
.hero-section {
  display: flex;
  align-items: center;
  padding: 60px 30px;
  background-color: #efefef;
  margin-bottom: 40px;
}

.hero-content {
  flex: 1;
  padding-right: 40px;
}

.hero-content h1 {
  font-size: 3rem;
  color: #409EFF;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: #666;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 15px;
}

.hero-image {
  flex: 1;
  text-align: center;
}

.hero-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 核心功能 */
.section {
  padding: 60px 30px;
  background-color: #fff;
  margin-bottom: 40px;
}

.section h2 {
  font-size: 2.2rem;
  color: #409EFF;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.section h2:after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background-color: #409EFF;
  margin: 15px auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.feature-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 30px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 15px;
}

</style>
